<!-- 咨询问诊订单 -->
<template>
  <div class="doctorreviewlist">
    <Row>
      <Col :xs="24">
        <div class="margin-up-down">
          <fourLevelLinkage
            @changeProvince="changeProvince"
            @changeCity="changeCity"
            @changeArea="changeArea"
            @changeHospital="changeHospital"
            :province="province"
            :city="city"
            :area="area"
            :hospital="hospital"
            :isBack="isBack"
          ></fourLevelLinkage>
        </div>
        <div class="margin-up-down">
          <DatePicker type="daterange" v-model="time" placement="bottom-end" placeholder="请选择日期" separator='至' style="width: 200px"></DatePicker>
        </div>
        <div class="margin-up-down">
          <Select class="w-select" clearable v-model="status" style='width:100px;' placeholder="类型">
            <Option
              v-for="(item,index) in statusList"
              :value="item.statusId"
              :key="index"
              style='text-align:center'
            >{{item.statusName}}</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <Select class="w-select" clearable v-model="inquiryTypestatus" style='width:100px;' placeholder="问诊类型">
            <Option
              v-for="(item,index) in inquiryType"
              :value="index"
              :key="index"
              style='text-align:center'
            >{{item}}</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <Select class="w-select" clearable v-model="zhuangtaistatus" style='width:100px;' placeholder="状态">
            <Option
              v-for="item in zhuangtai"
              :value="item.dictValue"
              :key="item.dictValue"
              style='text-align:center'
            >{{item.dictName}}</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <Select class="w-select" clearable v-model="dcotorTitle" style='width:100px;' placeholder="职称级别">
            <Option
              v-for="item in titleList"
              :value="item.dictType"
              :key="item.dictType"
              style='text-align:center'
            >{{item.dictName}}</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <Select class="w-select" clearable v-model="appid" style='width:150px;' placeholder="数据来源">
            <Option
              v-for="item in wxList"
              :value="item.appid"
              :key="item.appid"
              style='text-align:center'
            >{{item.nick}}</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <Input class="w-input" v-model="searchKey" placeholder="医院、医生、就诊人" style='width:290px;'/>
          <Button type="primary" @click="loadPage(1)" >
            <Icon type="ios-search" style="margin-right:5px" size="14"/>
          </Button>
        </div>
      </Col>
    </Row>
    <Table class="m-table" stripe :columns="columns" :data="orderList"></Table>
    <div class="page">
        <Page :total="count" :current='pageNo' show-total :page-size="pageSize" show-elevator @on-change="loadPage"/>
    </div>
  </div>
</template>
<script>
  import { DatePicker } from "view-design";
  import fourLevelLinkage from "@/components/fourLevelLinkage";
  import api from "@/api/commonApi";
  import Utils from "@/utils";
  export default {
    data() {
      return {
        province: null,
        city: null,
        area: null,
        hospital: null,
        isBack: 1,
        searchKey: "",
        time: [],
        status: null,
        inquiryTypestatus: null, // 订单类型
        zhuangtaistatus: null, // 问诊状态
        dcotorTitle: null, // 医生职称
        titleList: "",
        wxList: "",
        appid: null,
        /* 0:咨询,1:问诊,2:复诊,3:续方,4:药品咨询 */
        statusList: [
          {statusName: "健康咨询", statusId: 0},
          {statusName: "巡诊", statusId: 1},
          {statusName: "复诊续方", statusId: 2},
          {statusName: "用药咨询", statusId: 4},
        ],
        inquiryType: [
          "图文",
          "语音",
          "视频"
        ],
        zhuangtai: [
          {dictName: '待支付', dictValue: -1},
          {dictName: '待接诊', dictValue: 0},
          {dictName: '就诊中', dictValue: 1},
          {dictName: '已完成', dictValue: 2},
          {dictName: '拒绝接诊', dictValue: 3},
          // {dictName: '爽约', dictValue: 4},
          {dictName: '已取消', dictValue: 5}
        ],
        columns: [
          { title: "排序", key: "iNum", align: "center", width: 80,
            render: (h, params) => {
              let sum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", sum);
          }
          },
          {
            title: "患者姓名",
            key: "name",
            align: "center"
          },
          {
            title: "性别",
            key: "gender",
            align: "center",
            width: 80,
            render: (h, params) => {
              let status = params.row.gender;
              return status === 1 ? '男' : status === 2?'女':'其他'
            }
          },
          {
            title: "年龄",
            key: "age",
            align: "center",
            width: 80
          },
          {
            title: "类型",
            key: "serviceType",
            align: "center",
            render: (h, params) => {
              let status = params.row.serviceType;
              if(status ==4 ){
                status--;
              }
              return h("span",this.statusList[status].statusName);
            }
          },
          {
            title: "咨询时间",
            key: "createTime",
            align: "center"
          },
          {
            title: "支付金额(元)",
            key: "amt",
            align: "center",
            width: 120
          },
          {
            title: "咨询形式",
            key: "inquiryType",
            align: "center",
            render: (h, params) => {
              let status = params.row.inquiryType;
              return h("span", {}, this.inquiryType[status]);
            }
          },
          {
            title: "医生/药师",
            key: "doctorName",
            align: "center",
            width: 100
          },
          {
            title: "所属机构",
            key: "hospitalName",
            align: "center"
          },
          {
            title: "职称",
            key: "doctorTitle",
            align: "center"
          },
          {
            title: "状态",
            key: "status",
            align: "center",
            render: (h, params) => {
              let status = params.row.status;
              switch (status) {
                 case -1:
                  return '待支付';
                case 0:
                  return '待接诊';
                case 1:
                  return '就诊中';
                case 2:
                  return '已完成';
                case 3:
                  return '拒绝接诊';
                case 4:
                  return '爽约';
                case 5:
                  return '已取消';
              }
            }
          },
          {
            title: "设置",
            key: "operate",
            align: "center",
            width: 80,
            render: (h, params) => {
              let id = params.row.serviceId;
              let serverType = params.row.serviceType;
              let startDate = new Date(this.time[0]);
              let endDate = new Date(this.time[1]);
              startDate = Utils.getNowDateBySpecialFormat(this.time[0]);
              endDate = Utils.getNowDateBySpecialFormat(this.time[1]);
              return h(
                "a",
                {
                  attrs: {
                    href: "javascript:void(0);"
                  },
                  on: {
                    click: () => {
                      //   公用方法
                      this.functionJS.queryNavgationTo(
                        this,"/index/orders/consultingorder/detail",
                        {
                          // id,
                          pageNo: this.pageNo,
                          searchKey: this.searchKey,
                          startDate: startDate,
                          endDate: endDate,
                          status: this.status,
                          province: this.province,
                          city: this.city,
                          area: this.area,
                          hospital: this.hospital,
                          isBack: 2,
                          serviceId: id,
                          servertype: serverType
                        }
                      );
                    }
                  }
                },
                "详情"
              );
            }
          }
        ],
        orderList: [],
        count: 0,
        pageSize: 10,
        pageNo: 1
      };
    },
    components: {
      DatePicker,
      fourLevelLinkage
    },
    created() {
      let pageNo = this.$route.query.pageNo
        ? parseInt(this.$route.query.pageNo)
        : 1;
      this.searchKey = this.$route.query.searchKey
        ? this.$route.query.searchKey
        : "";
      this.time[0] = this.$route.query.startDate
        ? this.$route.query.startDate
        : this.GetDate(-30);
      this.time[1] = this.$route.query.endDate
        ? this.$route.query.endDate
        : this.GetDate(0);
      this.status =
        this.$route.query.status == null
          ? null
          : parseInt(this.$route.query.status);
      this.province = this.$route.query.province
        ? parseInt(this.$route.query.province)
        : null;
      this.city = this.$route.query.city
        ? parseInt(this.$route.query.city)
        : null;
      this.area = this.$route.query.area
        ? parseInt(this.$route.query.area)
        : null;
      this.hospital = this.$route.query.hospital
        ? this.$route.query.hospital
        : null;
      this.isBack = this.$route.query.isBack
        ? parseInt(this.$route.query.isBack)
        : 1;
      // 上来就加载第一页数据
      this.loadPage(pageNo);
      let breadList = [
        { path: "/index", title: "首页" },
        {
          path: "/index/orders/consultation/list",
          title: "订单管理中心"
        },
        {
          path: "/index/orders/consultation/list",
          title: "咨询问诊订单"
        }
      ];
      this.$emit("changeBreadList", breadList);
    },
    mounted() {
      this.$axios.post(api.getTitle,{}).then(resp => {
        this.titleList = resp.data.object;
      })
      this.$axios.post(api.findWxappList,{pageNo: 1,pageSize: 1000}).then(resp => {
        this.wxList = resp.data.object.records;
      })
    },
    methods: {
      changeProvince(val) {
        this.province = val;
      },
      changeCity(val) {
        this.city = val;
      },
      changeArea(val) {
        this.area = val;
      },
      changeHospital(val) {
        this.hospital = val;
      },
      // 加载列表数据
      loadPage(pageNo) {
        this.pageNo = pageNo;
        var params = {};
        params.serviceType = this.status;
        params.status = this.zhuangtaistatus;
        params.dcotorTitle = this.dcotorTitle;
        params.inquiryType = this.inquiryTypestatus;
        params.appid = this.appid;
        let startDate = new Date(this.time[0]);
        let endDate = new Date(this.time[1]);
        startDate = Utils.getNowDateBySpecialFormat(this.time[0]);
        endDate = Utils.getNowDateBySpecialFormat(this.time[1]);
        params.createTimeStart = startDate;
        params.createTimeEnd = endDate;
        params.searchKey = this.searchKey.trim() ? this.searchKey.trim() : null;
        params.provinceCode = this.province ? this.province : null;
        params.cityCode = this.city ? this.city : null;
        params.areaCode = this.area ? this.area : null;
        params.hospitalId = this.hospital ? this.hospital : null;
        params.pageNo = pageNo;
        params.pageSize = this.pageSize;
        this.$axios.post(api.findWxPersonInqPag, params).then(resp => {
          if (resp.data.success) {
            let tmpObj = resp.data.object;
            this.count = tmpObj.total;
            this.orderList = tmpObj.records;
            for (let i = 0; i < this.orderList.length; i++) {
              this.orderList[i].iNum = i + 1;
            }
          } else {
            this.$Message.info("网络错误，请刷新重试");
          }
        })
      }
    }
  };
</script>
<style lang="less" scoped>
  .doctorreviewlist {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
      width: 100px;
    }
    .w-input {
      width: 220px;
    }
    .m-table {
      margin: 10px 0;
    }
    .margin-up-down {
      display: inline-block;
      margin: 10px 0;
    }
    .page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
  }
</style>
